<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多模态感知与异常评估系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="./common-styles.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        neutral: {
                            100: '#F5F5F5',
                            200: '#E5E5E5',
                            300: '#D4D4D4',
                            400: '#A3A3A3',
                            500: '#737373',
                            600: '#525252',
                            700: '#404040',
                            800: '#262626',
                            900: '#171717',
                        },
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        info: '#1890FF',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
</head>

<body class="font-inter bg-neutral-100 text-neutral-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <!-- 统一导航菜单 -->
<nav class="bg-white border-b border-neutral-200 sticky top-0 z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex items-center">
                <div class="flex-shrink-0 flex items-center">
                    <i class="fa fa-cube text-primary text-xl mr-2"></i>
                    <span class="font-medium text-lg">智能运维平台</span>
                </div>
                <div class="hidden sm:ml-6 sm:flex sm:space-x-6">
                    <a href="多模态.html" class="border-primary text-primary inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-line-chart mr-1"></i> 多模态评估
                    </a>
                    <a href="聊天助手.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-comment mr-1"></i> 聊天助手
                    </a>
                    <a href="使用率.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-microchip mr-1"></i> 性能监控
                    </a>
                    <a href="ai.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-bug mr-1"></i> 故障诊断
                    </a>
                    <a href="os运维场景.html" class="border-transparent text-neutral-500 hover:border-neutral-300 hover:text-neutral-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                        <i class="fa fa-server mr-1"></i> 运维场景
                    </a>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <a href="登录.html" class="text-neutral-500 hover:text-neutral-700 inline-flex items-center px-1 pt-1 text-sm font-medium">
                    <i class="fa fa-sign-in mr-1"></i> 登录
                </a>
                <a href="注册.html" class="text-neutral-500 hover:text-neutral-700 inline-flex items-center px-1 pt-1 text-sm font-medium">
                    <i class="fa fa-user-plus mr-1"></i> 注册
                </a>
                <div class="relative">
                    <button type="button" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                        <img class="h-8 w-8 rounded-full" src="https://i.pravatar.cc/150?img=33" alt="用户头像">
                    </button>
                </div>
                <button type="button" class="p-2 rounded-full text-neutral-500 hover:text-neutral-700 hover:bg-neutral-100 focus:outline-none">
                    <i class="fa fa-cog"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- 移动端菜单 -->
    <div class="sm:hidden">
        <div class="pt-2 pb-3 space-y-1">
            <a href="登录.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-sign-in mr-1"></i> 登录
            </a>
            <a href="注册.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-user-plus mr-1"></i> 注册
            </a>
            <a href="多模态.html" class="bg-primary text-white block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-line-chart mr-1"></i> 多模态评估
            </a>
            <a href="聊天助手.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-comment mr-1"></i> 聊天助手
            </a>
            <a href="使用率.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-microchip mr-1"></i> 性能监控
            </a>
            <a href="ai.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-bug mr-1"></i> 故障诊断
            </a>
            <a href="os运维场景.html" class="border-transparent text-neutral-600 hover:bg-neutral-50 hover:border-neutral-300 hover:text-neutral-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
                <i class="fa fa-server mr-1"></i> 运维场景
            </a>
        </div>
    </div>
</nav>

    <!-- 主内容区域 -->
    <main class="flex-grow">
        <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
            <!-- 页面标题区域 -->
            <div
                class="bg-gradient-to-r from-primary to-info text-white rounded-xl p-6 mb-8 animate-gradient relative overflow-hidden">
                <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -mr-32 -mt-32"></div>
                <div class="absolute bottom-0 left-0 w-48 h-48 bg-white/10 rounded-full -ml-24 -mb-24"></div>
                <div class="relative z-10">
                    <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-2">多模态感知与异常评估</h1>
                    <p class="text-white/90 mb-4">采集多层级、多种类系统运行数据，综合分析故障并评估严重等级</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="px-3 py-1 bg-white/20 rounded-full text-sm">全栈数据采集</span>
                        <span class="px-3 py-1 bg-white/20 rounded-full text-sm">智能异常检测</span>
                        <span class="px-3 py-1 bg-white/20 rounded-full text-sm">风险等级评估</span>
                        <span class="px-3 py-1 bg-white/20 rounded-full text-sm">运维成本优化</span>
                    </div>
                </div>
            </div>

            <!-- 核心指标卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-neutral-800">数据采集点</h3>
                        <span class="px-2 py-1 text-xs bg-success/10 text-success rounded-full">全部在线</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-3xl font-bold text-neutral-800">52</p>
                            <p class="text-sm text-neutral-500">活跃数据源</p>
                        </div>
                        <div class="relative w-16 h-16">
                            <svg class="w-16 h-16 progress-ring" viewBox="0 0 36 36">
                                <circle cx="18" cy="18" r="16" fill="none" stroke="#E5E5E5" stroke-width="2" />
                                <circle cx="18" cy="18" r="16" fill="none" stroke="#52C41A" stroke-width="2"
                                    stroke-dasharray="100" stroke-dashoffset="0" />
                            </svg>
                            <div class="absolute inset-0 flex items-center justify-center text-success">
                                <i class="fa fa-database"></i>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="flex justify-between text-xs mb-1">
                            <span>数据完整性</span>
                            <span>99.6%</span>
                        </div>
                        <div class="w-full bg-neutral-200 rounded-full h-2">
                            <div class="bg-success h-2 rounded-full" style="width: 99.6%"></div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-neutral-800">今日异常数</h3>
                        <span class="px-2 py-1 text-xs bg-warning/10 text-warning rounded-full">需处理</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-3xl font-bold text-neutral-800">24</p>
                            <p class="text-sm text-neutral-500">检测异常事件</p>
                        </div>
                        <div class="relative w-16 h-16">
                            <svg class="w-16 h-16 progress-ring" viewBox="0 0 36 36">
                                <circle cx="18" cy="18" r="16" fill="none" stroke="#E5E5E5" stroke-width="2" />
                                <circle cx="18" cy="18" r="16" fill="none" stroke="#FAAD14" stroke-width="2"
                                    stroke-dasharray="100" stroke-dashoffset="35" />
                            </svg>
                            <div class="absolute inset-0 flex items-center justify-center text-warning">
                                <i class="fa fa-exclamation-triangle"></i>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="flex justify-between text-xs mb-1">
                            <span>处理进度</span>
                            <span>65%</span>
                        </div>
                        <div class="w-full bg-neutral-200 rounded-full h-2">
                            <div class="bg-warning h-2 rounded-full" style="width: 65%"></div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-neutral-800">系统风险指数</h3>
                        <span class="px-2 py-1 text-xs bg-primary/10 text-primary rounded-full">中等风险</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-3xl font-bold text-neutral-800">68</p>
                            <p class="text-sm text-neutral-500">综合评估得分</p>
                        </div>
                        <div class="relative w-16 h-16">
                            <svg class="w-16 h-16 progress-ring" viewBox="0 0 36 36">
                                <circle cx="18" cy="18" r="16" fill="none" stroke="#E5E5E5" stroke-width="2" />
                                <circle cx="18" cy="18" r="16" fill="none" stroke="#165DFF" stroke-width="2"
                                    stroke-dasharray="100" stroke-dashoffset="32" />
                            </svg>
                            <div class="absolute inset-0 flex items-center justify-center text-primary">
                                <i class="fa fa-shield"></i>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="flex justify-between text-xs mb-1">
                            <span>风险趋势</span>
                            <span class="text-danger"><i class="fa fa-arrow-up"></i> 5.2%</span>
                        </div>
                        <div class="w-full bg-neutral-200 rounded-full h-2">
                            <div class="bg-primary h-2 rounded-full" style="width: 68%"></div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-neutral-800">运维效率提升</h3>
                        <span class="px-2 py-1 text-xs bg-success/10 text-success rounded-full">显著提升</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-3xl font-bold text-neutral-800">72%</p>
                            <p class="text-sm text-neutral-500">人力成本降低</p>
                        </div>
                        <div class="relative w-16 h-16">
                            <svg class="w-16 h-16 progress-ring" viewBox="0 0 36 36">
                                <circle cx="18" cy="18" r="16" fill="none" stroke="#E5E5E5" stroke-width="2" />
                                <circle cx="18" cy="18" r="16" fill="none" stroke="#52C41A" stroke-width="2"
                                    stroke-dasharray="100" stroke-dashoffset="28" />
                            </svg>
                            <div class="absolute inset-0 flex items-center justify-center text-success">
                                <i class="fa fa-line-chart"></i>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4">
                        <div class="flex justify-between text-xs mb-1">
                            <span>故障解决时间</span>
                            <span class="text-success"><i class="fa fa-arrow-down"></i> 45分钟</span>
                        </div>
                        <div class="w-full bg-neutral-200 rounded-full h-2">
                            <div class="bg-success h-2 rounded-full" style="width: 72%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 多模态数据采集源 -->
            <!-- 定制化故障诊断策略 -->
            <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
                <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
                    <div>
                        <h2 class="text-xl font-semibold mb-2">定制化故障诊断策略</h2>
                        <p class="text-neutral-600">针对不同应用场景的特定需求提供定制化的故障诊断流程和解决方案</p>
                    </div>
                    <div class="mt-4 md:mt-0">
                        <button
                            class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors">
                            <i class="fa fa-plus mr-1"></i> 新建策略
                        </button>
                    </div>
                </div>

                <!-- 应用场景选择器 -->
                <div class="bg-neutral-50 rounded-lg p-4 mb-6">
                    <h3 class="text-sm font-semibold text-neutral-800 mb-3">选择应用场景</h3>
                    <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
                        <button
                            class="bg-white border border-primary text-primary rounded-lg p-3 text-center hover:bg-primary/5 transition-colors">
                            <i class="fa fa-server text-xl mb-2"></i>
                            <p class="text-sm">服务器集群</p>
                        </button>
                        <button
                            class="bg-white border border-neutral-200 text-neutral-600 rounded-lg p-3 text-center hover:border-primary hover:text-primary hover:bg-primary/5 transition-colors">
                            <i class="fa fa-database text-xl mb-2"></i>
                            <p class="text-sm">数据库系统</p>
                        </button>
                        <button
                            class="bg-white border border-neutral-200 text-neutral-600 rounded-lg p-3 text-center hover:border-primary hover:text-primary hover:bg-primary/5 transition-colors">
                            <i class="fa fa-cloud text-xl mb-2"></i>
                            <p class="text-sm">云服务平台</p>
                        </button>
                        <button
                            class="bg-white border border-neutral-200 text-neutral-600 rounded-lg p-3 text-center hover:border-primary hover:text-primary hover:bg-primary/5 transition-colors">
                            <i class="fa fa-mobile text-xl mb-2"></i>
                            <p class="text-sm">移动应用</p>
                        </button>
                        <button
                            class="bg-white border border-neutral-200 text-neutral-600 rounded-lg p-3 text-center hover:border-primary hover:text-primary hover:bg-primary/5 transition-colors">
                            <i class="fa fa-exchange text-xl mb-2"></i>
                            <p class="text-sm">网络设备</p>
                        </button>
                        <button
                            class="bg-white border border-neutral-200 text-neutral-600 rounded-lg p-3 text-center hover:border-primary hover:text-primary hover:bg-primary/5 transition-colors">
                            <i class="fa fa-cogs text-xl mb-2"></i>
                            <p class="text-sm">自定义场景</p>
                        </button>
                    </div>
                </div>

                <!-- 服务器集群诊断策略 -->
                <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden mb-6">
                    <div class="bg-primary text-white p-4 flex justify-between items-center">
                        <h3 class="font-medium">服务器集群故障诊断策略</h3>
                        <div class="flex space-x-2">
                            <button class="text-white hover:text-white/80"><i class="fa fa-pencil"></i></button>
                            <button class="text-white hover:text-white/80"><i class="fa fa-trash"></i></button>
                        </div>
                    </div>

                    <!-- 诊断流程步骤 -->
                    <div class="p-5">
                        <div class="relative">
                            <!-- 步骤连接线 -->
                            <div class="absolute left-4 top-6 bottom-0 w-0.5 bg-neutral-200"></div>

                            <!-- 步骤1 -->
                            <div class="flex mb-6">
                                <div
                                    class="relative z-10 w-8 h-8 rounded-full bg-success flex items-center justify-center text-white flex-shrink-0">
                                    1</div>
                                <div class="ml-4">
                                    <h4 class="text-sm font-medium mb-1">系统状态检查</h4>
                                    <p class="text-xs text-neutral-600 mb-2">自动收集CPU、内存、磁盘I/O、网络带宽等系统指标，分析是否存在资源瓶颈</p>
                                    <div class="bg-neutral-50 rounded p-3">
                                        <div class="flex justify-between text-xs mb-1">
                                            <span>数据来源</span>
                                            <span>硬件监控系统、系统日志</span>
                                        </div>
                                        <div class="flex justify-between text-xs mb-1">
                                            <span>检查频率</span>
                                            <span>实时监控，每5分钟分析一次</span>
                                        </div>
                                        <div class="flex justify-between text-xs">
                                            <span>检测指标</span>
                                            <span>12项系统性能指标</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 步骤2 -->
                            <div class="flex mb-6">
                                <div
                                    class="relative z-10 w-8 h-8 rounded-full bg-success flex items-center justify-center text-white flex-shrink-0">
                                    2</div>
                                <div class="ml-4">
                                    <h4 class="text-sm font-medium mb-1">服务运行状态分析</h4>
                                    <p class="text-xs text-neutral-600 mb-2">检查关键服务的运行状态、响应时间和错误日志，识别服务级故障</p>
                                    <div class="bg-neutral-50 rounded p-3">
                                        <div class="flex justify-between text-xs mb-1">
                                            <span>数据来源</span>
                                            <span>服务监控系统、应用日志</span>
                                        </div>
                                        <div class="flex justify-between text-xs mb-1">
                                            <span>检查频率</span>
                                            <span>每1分钟检查一次</span>
                                        </div>
                                        <div class="flex justify-between text-xs">
                                            <span>检测指标</span>
                                            <span>8项服务健康指标</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 步骤3 -->
                            <div class="flex mb-6">
                                <div
                                    class="relative z-10 w-8 h-8 rounded-full bg-warning flex items-center justify-center text-white flex-shrink-0">
                                    3</div>
                                <div class="ml-4">
                                    <h4 class="text-sm font-medium mb-1">网络连接测试</h4>
                                    <p class="text-xs text-neutral-600 mb-2">执行网络连通性测试，检查服务器间通信状态，识别网络故障</p>
                                    <div class="bg-neutral-50 rounded p-3">
                                        <div class="flex justify-between text-xs mb-1">
                                            <span>数据来源</span>
                                            <span>网络监控系统、ping/traceroute</span>
                                        </div>
                                        <div class="flex justify-between text-xs mb-1">
                                            <span>检查频率</span>
                                            <span>检测到异常时触发</span>
                                        </div>
                                        <div class="flex justify-between text-xs">
                                            <span>检测指标</span>
                                            <span>5项网络连接指标</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 步骤4 -->
                            <div class="flex">
                                <div
                                    class="relative z-10 w-8 h-8 rounded-full bg-neutral-300 flex items-center justify-center text-neutral-600 flex-shrink-0">
                                    4</div>
                                <div class="ml-4">
                                    <h4 class="text-sm font-medium mb-1">故障根因分析</h4>
                                    <p class="text-xs text-neutral-600 mb-2">基于多层级数据综合分析，确定故障根本原因，生成解决方案</p>
                                    <div class="bg-neutral-50 rounded p-3">
                                        <div class="flex justify-between text-xs mb-1">
                                            <span>分析方法</span>
                                            <span>机器学习算法、关联规则分析</span>
                                        </div>
                                        <div class="flex justify-between text-xs mb-1">
                                            <span>响应时间</span>
                                            <span>平均5分钟内生成报告</span>
                                        </div>
                                        <div class="flex justify-between text-xs">
                                            <span>解决方案</span>
                                            <span>自动生成3种排障建议</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 最佳排障实践指南 -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-xl font-semibold">最佳排障实践指南</h2>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-lg">全部</button>
                            <button
                                class="px-3 py-1 text-sm bg-neutral-100 text-neutral-600 rounded-lg hover:bg-primary/10 hover:text-primary transition-colors">硬件</button>
                            <button
                                class="px-3 py-1 text-sm bg-neutral-100 text-neutral-600 rounded-lg hover:bg-primary/10 hover:text-primary transition-colors">软件</button>
                            <button
                                class="px-3 py-1 text-sm bg-neutral-100 text-neutral-600 rounded-lg hover:bg-primary/10 hover:text-primary transition-colors">网络</button>
                            <button
                                class="px-3 py-1 text-sm bg-neutral-100 text-neutral-600 rounded-lg hover:bg-primary/10 hover:text-primary transition-colors">配置</button>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <!-- 实践指南卡片1 -->
                        <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                            <div class="h-40 bg-primary/5 flex items-center justify-center">
                                <i class="fa fa-server text-5xl text-primary/30"></i>
                            </div>
                            <div class="p-4">
                                <h3 class="font-medium mb-2">服务器CPU使用率过高解决方案</h3>
                                <p class="text-sm text-neutral-600 mb-3">针对服务器CPU使用率持续超过90%的情况，提供系统化的排查步骤和解决方案</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-primary">硬件问题</span>
                                    <button class="text-primary text-sm hover:underline">查看详情</button>
                                </div>
                            </div>
                        </div>

                        <!-- 实践指南卡片2 -->
                        <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                            <div class="h-40 bg-secondary/5 flex items-center justify-center">
                                <i class="fa fa-database text-5xl text-secondary/30"></i>
                            </div>
                            <div class="p-4">
                                <h3 class="font-medium mb-2">数据库连接超时故障处理</h3>
                                <p class="text-sm text-neutral-600 mb-3">当数据库连接响应时间超过5秒时，如何快速定位并解决问题的最佳实践</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-secondary">软件问题</span>
                                    <button class="text-primary text-sm hover:underline">查看详情</button>
                                </div>
                            </div>
                        </div>

                        <!-- 实践指南卡片3 -->
                        <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                            <div class="h-40 bg-warning/5 flex items-center justify-center">
                                <i class="fa fa-exchange text-5xl text-warning/30"></i>
                            </div>
                            <div class="p-4">
                                <h3 class="font-medium mb-2">网络丢包率过高排查流程</h3>
                                <p class="text-sm text-neutral-600 mb-3">针对网络丢包率超过2%的情况，提供从物理层到应用层的全面排查方法</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-warning">网络问题</span>
                                    <button class="text-primary text-sm hover:underline">查看详情</button>
                                </div>
                            </div>
                        </div>

                        <!-- 实践指南卡片4 -->
                        <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                            <div class="h-40 bg-info/5 flex items-center justify-center">
                                <i class="fa fa-memory text-5xl text-info/30"></i>
                            </div>
                            <div class="p-4">
                                <h3 class="font-medium mb-2">内存泄漏检测与修复</h3>
                                <p class="text-sm text-neutral-600 mb-3">如何使用专业工具检测内存泄漏问题，并提供有效的代码优化建议</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-info">软件问题</span>
                                    <button class="text-primary text-sm hover:underline">查看详情</button>
                                </div>
                            </div>
                        </div>

                        <!-- 实践指南卡片5 -->
                        <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                            <div class="h-40 bg-success/5 flex items-center justify-center">
                                <i class="fa fa-cogs text-5xl text-success/30"></i>
                            </div>
                            <div class="p-4">
                                <h3 class="font-medium mb-2">配置错误自动识别与修复</h3>
                                <p class="text-sm text-neutral-600 mb-3">利用AI算法自动识别系统配置错误，并提供安全可靠的修复建议</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-success">配置问题</span>
                                    <button class="text-primary text-sm hover:underline">查看详情</button>
                                </div>
                            </div>
                        </div>

                        <!-- 实践指南卡片6 -->
                        <div class="bg-white rounded-lg border border-neutral-200 overflow-hidden card-hover">
                            <div class="h-40 bg-danger/5 flex items-center justify-center">
                                <i class="fa fa-hdd-o text-5xl text-danger/30"></i>
                            </div>
                            <div class="p-4">
                                <h3 class="font-medium mb-2">磁盘I/O性能优化指南</h3>
                                <p class="text-sm text-neutral-600 mb-3">当磁盘I/O等待时间超过20ms时，如何优化磁盘性能和应用程序读写模式</p>
                                <div class="flex justify-between items-center">
                                    <span class="text-xs text-danger">硬件问题</span>
                                    <button class="text-primary text-sm hover:underline">查看详情</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
</body>

<!-- 页面脚本 -->
<script>
    // 初始化所有图表
    document.addEventListener('DOMContentLoaded', function () {
        // 系统风险趋势图表
        const riskCtx = document.getElementById('riskTrendChart');
        if (riskCtx) {
            const riskTrendChart = new Chart(riskCtx, {
                type: 'line',
                data: {
                    labels: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
                    datasets: [
                        {
                            label: '高风险',
                            data: [0, 0, 0, 0, 0, 1, 2, 2, 2, 2, 2, 2],
                            borderColor: '#FF4D4F',
                            backgroundColor: 'rgba(255, 77, 79, 0.1)',
                            tension: 0.3,
                            fill: true
                        },
                        {
                            label: '中风险',
                            data: [2, 2, 3, 3, 4, 4, 5, 5, 5, 5, 5, 5],
                            borderColor: '#FAAD14',
                            backgroundColor: 'rgba(250, 173, 20, 0.1)',
                            tension: 0.3,
                            fill: true
                        },
                        {
                            label: '低风险',
                            data: [8, 8, 9, 10, 11, 12, 12, 12, 12, 12, 12, 12],
                            borderColor: '#737373',
                            backgroundColor: 'rgba(115, 115, 115, 0.1)',
                            tension: 0.3,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                            labels: {
                                boxWidth: 12,
                                usePointStyle: true,
                                pointStyle: 'circle'
                            }
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 2
                            }
                        }
                    },
                    animation: {
                        duration: 1000,
                        easing: 'easeOutQuart'
                    }
                }
            });
        }

        // 应用场景选择器交互
        const scenarioButtons = document.querySelectorAll('.grid-cols-2 button');
        scenarioButtons.forEach(button => {
            button.addEventListener('click', function () {
                scenarioButtons.forEach(btn => {
                    btn.classList.remove('bg-white', 'border-primary', 'text-primary');
                    btn.classList.add('bg-white', 'border-neutral-200', 'text-neutral-600');
                });
                this.classList.remove('bg-white', 'border-neutral-200', 'text-neutral-600');
                this.classList.add('bg-white', 'border-primary', 'text-primary');
            });
        });
    });
</script>